<template>
  <el-table :data="displayedTableData" style="width: 100%">
    <!-- 动态生成列 -->
    <el-table-column v-for="(header, index) in headers" :key="index" :prop="header" :label="header">
      <template #default="{ row }">
        <!-- 使用计算属性 cellContent 来决定显示什么内容 -->
        {{ getCellContent(row, header) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="text" @click="showDialog(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    :page-sizes="[1, 2, 5, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.length">
  </el-pagination>
  <!-- 引入 EDialog 组件 -->
  <EDialog :visible="dialogVisible" title="编辑用户" @submit="onSubmit" @update:visible="dialogVisible = $event">
    <!-- 内容区域 -->
    <template #content>
      <!-- <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form> -->
    </template>
    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </template>
  </EDialog>
</template>

<script setup>
import { computed, ref, reactive, watch } from 'vue';
import EDialog from './dialog.vue';

let props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
  }
});

// 计算属性用于确定所有用户的共有字段
const headers = computed(() => {
  if (!props.tableData.length) return [];
  const keys = Object.keys(props.tableData[0]);
  return keys.filter(key => key !== '_id' && key !== 'istop' && key !== 'roleid' && key !== 'pwd');
});

// 计算属性用于确定单元格的内容
const getCellContent = (row, header) => {
  if (header === 'sex') {
    // 如果是 sex 列，则使用三元表达式
    return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知';
  } else {
    // 否则，显示普通的列内容
    return row[header] || '';
  }
};

// 分页相关数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的数据数量
const displayedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return props.tableData.slice(start, end);
});

// 分页事件处理
const handleSizeChange = (val) => {
  pageSize.value = val;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const form = reactive()
const dialogVisible = ref(false)
function showDialog() {
  dialogVisible.value = true;
}

</script>

<style scoped>
/* 自定义分页器样式 */
.el-pagination {
  display: flex;
  justify-content: end;
  /* 居中对齐 */
  margin-top: 20px;
  /* 上边距 */
}

.el-pagination .el-pager li {
  padding: 6px 12px;
  /* 增加按钮内的填充 */
}

.el-pagination .el-input__inner {
  height: 32px;
  /* 调整输入框的高度 */
  line-height: 32px;
  /* 调整输入框的行高 */
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  padding: 6px 12px;
  /* 增加按钮内的填充 */
}

/* 高亮当前页码 */
.el-pagination .el-pager li.current-page {
  background-color: #409EFF;
  color: #fff;
  border-radius: 4px;
}

/* 修改分页器的字体大小 */
.el-pagination .el-input__inner,
.el-pagination .el-pager li,
.el-pagination .el-select .el-input .el-input__inner {
  font-size: 14px;
}
</style>